<template>
  <div class="code-layout">
    <!-- <div class="code-materials"> -->
    <!-- <plug-state :statusStr="status" /> -->
    <!-- <br /> -->
    <!-- <div>
      <dl class="code-dl" v-for="(e, i) in version.tcp_port_list" :key="i">
        <li v-if="e.endpoint">
          <span class="key">端口{{ e.containerPort }}:</span>
          <span class="val"> {{ e.endpoint }}</span>
        </li>
      </dl>
    </div> -->
    <!-- <div class="file">
        <s3-file-list :s3_access_id="version.s3_access_id" :s3_path="version.s3_path" v-if="version.s3_access_id" />
        <file-list :biz_id="version.id" type="workspace" v-else />
      </div> -->
    <!-- <md-preview :biz_id="$route.query.id" type="workspace" class="preview" /> -->
    <!-- </div> -->


    <div class="code-info">
      <!--      <div class="desc-container">-->
      <!--        <h3 class="info-title">提交信息</h3>-->
      <!--        <el-input type="textarea" placeholder="暂无描述信息" :autosize="{ minRows: 4, maxRows: 4 }" disabled-->
      <!--                  v-model="detailData.desc" style="cursor: pointer"/>-->
      <!--      </div>-->

      <div class="code-info-item">
        <h3 class="info-title">基本信息<i class="el-icon-edit-outline edit" @click="updateTask"/></h3>
        <!-- <i class="el-icon-edit-outline edit" @click="updateEnv" /> -->
        <ul class="info-item">
          <li>
            <span class="key">名称:</span>
            <span class="val">{{ detailData.name }}</span>
          </li>
          <li>
            <span class="key"> 创建人： </span>
            <span class="val">{{
                detailData.create_user && (detailData.create_user.nick_name ||
                  detailData.create_user.username)
              }}</span>
          </li>
          <li>
            <span class="key">创建时间： </span>
            <span class="val">{{ detailData.create_time }}</span>
          </li>
        </ul>
      </div>

      <div class="code-info-item">
        <h3 class="info-title">开发环境<i class="el-icon-edit-outline edit" @click="updateEnv" /></h3>
        <dl class="code-dl" v-for="(e, i) in version.node_group_list" :key="i">
          <ul class="info-item">
            <li>
              <span class="key">节点类型:</span>
              <span class="val">{{ nodeTypeMaps[e.type] }}</span>
            </li>
            <li>
              <span class="key">资源组:</span>
              <span class="val">{{ e.product.name }}</span>
            </li>
            <li>
              <span class="key">镜像:</span>
              <span class="val">{{ e.image.name }}</span>
            </li>
            <li>
              <span class="key">数量:</span>
              <span class="val">{{ e.pod_num }}</span>
            </li>
            <li>
              <span class="key">启动命令行:</span>
              <span class="val">{{ e.command }}</span>
            </li>
          </ul>
        </dl>
      </div>

      <div class="code-info-item">
        <h3 class="info-title">数据集</h3>

        <ul class="alike-lis">
          <li v-for="(item, index) in version.dataset_list" :key="index">
            <div class="alike-lis-box">
              <div class="alike-lis-pic">
                <v-image :src="item.dataset.avatar?item.dataset.avatar:require('@/assets/img/drone3.jpg')" alt=""/>
                <div class="mask" v-if="Datasetde.id != item.id">
                  <el-button @click.stop="deleteMsg(item.id)" type="text"><i class="el-icon-delete"></i></el-button>
                </div>
                <div class="mask_frim" v-if="Datasetde.id == item.id">
                  <div class="mask_btn_box">
                    <div>是否确定删除该数据集？</div>
                    <div class="mask_btn">
                      <el-button size="small" type="info" @click.stop="cancelData">取消</el-button>
                      <el-button size="small" type="primary" @click.stop="deleteDataset(item)">确定</el-button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="alike-lis-word">
                <div class="alike-lis-title">
              <span>
                  {{ item.dataset.name }}
              </span>
                </div>
                <p class="alike-lis-hint">{{ item.dataset.alias }}</p>
              </div>
            </div>
          </li>

          <li class="add_box" @click="updateDataset">
            <div class="add_msg">
              <div>
                <i class="el-icon-plus"></i>
                <div>添加数据集</div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="code-info-item">
        <h3 class="info-title">预训练模型</h3>
        <ul class="alike-lis">
          <li v-for="(item, index) in version.model_list" :key="index">
            <div class="alike-lis-box">
              <div class="alike-lis-pic">
                <v-image :src="item.model.avatar?item.model.avatar:require('@/assets/img/drone3.jpg')" alt=""/>
                <div class="mask" v-if="verModel.id != item.id">
                  <el-button @click.stop="delModel(item)" type="text"><i class="el-icon-delete"></i></el-button>
                </div>
                <div class="mask_frim" v-if="verModel.id == item.id">
                  <div class="mask_btn_box">
                    <div>是否确定删除该预训练模型？</div>
                    <div class="mask_btn">
                      <el-button size="small" type="info" @click.stop="canceModel">取消</el-button>
                      <el-button size="small" type="primary" @click.stop="deleteModel(item)">确定</el-button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="alike-lis-word">
                <div class="alike-lis-title">
              <span>
                  {{ item.model.name }}
              </span>
                </div>
                <p class="alike-lis-hint">挂载地址：/model/{{ item.model.alias }}</p>
              </div>
            </div>
          </li>

          <li class="add_box" @click="updateModel">
            <div class="add_msg">
              <div>
                <i class="el-icon-plus"></i>
                <div>添加预训练模型</div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="code-info-item">
        <div class="add_title_box">
          <h3 class="info-title">S3输入</h3>
          <el-button class="add_box_btn" size="mini" icon="el-icon-plus" type="success" plain
                     @click="updateInS3">添加
          </el-button>
        </div>

        <el-table
          v-if="s3_flag"
          :data="in_s3_list"
          style="width: 100%">
          <el-table-column
            prop="s3_name"
            align="center"
            label="名称">
            <template slot-scope="scope">
              <el-input v-if="isAddNode_group && scope.row.id === nodeItem.id" v-model="scope.row.s3_name"/>
              <span v-else>{{ scope.row.s3_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="s3_id"
            align="center"
            label="桶">
            <template slot-scope="scope">
              <el-select v-if="isAddNode_group && scope.row.id === nodeItem.id" v-model="scope.row.s3_id">
                <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
                </el-option>
              </el-select>
              <span v-else>{{ s3idFormat(scope.row.s3_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="path"
            align="center"
            label="路径">
            <template slot-scope="scope">
              <el-input v-if="isAddNode_group && scope.row.id === nodeItem.id" v-model="scope.row.path"/>
              <span v-else>{{ scope.row.path }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="s3_name"
            align="center"
            label="挂载地址">
            <template slot-scope="scope">
              /output/{{ scope.row.s3_name }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="120">
            <template slot-scope="scope">
              <el-button v-if="!isAddNode_group" @click="showNodeGroup(scope.row)" type="text" size="small">编辑
              </el-button>
              <el-button v-if="isAddNode_group && nodeItem.id != scope.row.id" @click="showNodeGroup(scope.row)"
                         type="text" size="small">编辑
              </el-button>
              <el-button v-if="isAddNode_group && scope.row.id == nodeItem.id" @click="saveS3In()"
                         type="text" class="slavecolor" size="small">保存
              </el-button>
              <el-button type="text" @click="deleteS3out(scope.row)" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="code-info-item">
        <!--        <h3 class="info-title" v-if="s3_flag">S3输出<i class="el-icon-edit-outline edit" @click="updateOutS3"/></h3>-->
        <div class="add_title_box">
          <h3 class="info-title">S3输出</h3>
          <el-button class="add_box_btn" size="mini" icon="el-icon-plus" type="success" plain
                     @click="updateOutS3">添加
          </el-button>
        </div>

        <el-table
          v-if="s3_flag"
          :data="out_s3_list"
          style="width: 100%">
          <el-table-column
            prop="s3_name"
            align="center"
            label="名称">
            <template slot-scope="scope">
              <el-input v-if="isAddNode_group && scope.row.id === nodeItem.id" v-model="scope.row.s3_name"/>
              <span v-else>{{ scope.row.s3_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="s3_id"
            align="center"
            label="桶">
            <template slot-scope="scope">
              <el-select v-if="isAddNode_group && scope.row.id === nodeItem.id" v-model="scope.row.s3_id">
                <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
                </el-option>
              </el-select>
              <span v-else>{{ s3idFormat(scope.row.s3_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="path"
            align="center"
            label="路径">
            <template slot-scope="scope">
              <el-input v-if="isAddNode_group && scope.row.id === nodeItem.id" v-model="scope.row.path"/>
              <span v-else>{{ scope.row.path }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="s3_name"
            align="center"
            label="挂载地址">
            <template slot-scope="scope">
              /output/{{ scope.row.s3_name }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button v-if="!isAddNode_group" @click="showNodeGroup(scope.row)" type="text" size="small">编辑
              </el-button>
              <el-button v-if="isAddNode_group && nodeItem.id != scope.row.id" @click="showNodeGroup(scope.row)"
                         type="text" size="small">编辑
              </el-button>
              <el-button v-if="isAddNode_group && scope.row.id == nodeItem.id" @click="saveS3out()"
                         type="text" class="slavecolor" size="small">保存
              </el-button>
              <el-button type="text" @click="deleteS3out(scope.row)" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="code-info-item">
        <!--        <h3 class="info-title">超参<i class="el-icon-edit-outline edit" @click="updateParameter"/></h3>-->
        <div class="add_title_box">
          <h3 class="info-title">超参</h3>
          <el-button class="add_box_btn" size="mini" icon="el-icon-plus" type="success" plain
                     @click="updateParameter">添加
          </el-button>
        </div>
        <el-table
          :data="version.parameter_list"
          style="width: 100%">
          <el-table-column
            prop="name"
            align="center"
            label="显示名">
            <template slot-scope="scope">
              <el-input v-if="isAddNode_group && scope.row.id === nodeItem.id" v-model="scope.row.name"/>
              <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="key"
            align="center"
            label="参数名">
            <template slot-scope="scope">
              <el-input v-if="isAddNode_group && scope.row.id === nodeItem.id" v-model="scope.row.key"/>
              <span v-else>{{ scope.row.key }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="value"
            align="center"
            label="参数值">
            <template slot-scope="scope">
              <el-input v-if="isAddNode_group && scope.row.id === nodeItem.id" v-model="scope.row.value"/>
              <span v-else>{{ scope.row.value }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="120">
            <template slot-scope="scope">
              <el-button v-if="!isAddNode_group" @click="showNodeGroup(scope.row)" type="text" size="small">编辑
              </el-button>
              <el-button v-if="isAddNode_group && nodeItem.id != scope.row.id" @click="showNodeGroup(scope.row)"
                         type="text" size="small">编辑
              </el-button>
              <el-button v-if="isAddNode_group && scope.row.id == nodeItem.id" @click="saveParameter()"
                         type="text" class="slavecolor" size="small">保存
              </el-button>
              <el-button type="text" @click="deleteParameter(scope.row)" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="code-info-item">
        <h3 class="info-title">端口<i class="el-icon-edit-outline edit" @click="updatePort"/></h3>
        <ul class="info-item">
          <dl class="code-dl" v-for="(e, i) in version.port_list" :key="i">
            <!-- <li>
              <span class="key">协议:</span>
              <span class="val">{{ e.protocol }}</span>
            </li> -->
            <li>
              <span class="key">端口:</span>
              <span class="val">{{ e.port }}</span>
            </li>
          </dl>
        </ul>
      </div>

      <md-preview :biz_id="$route.query.id" type="workspace" class="preview"/>
    </div>

    <DialogBox title="模型训练" :visible="showTaskDialog" :confirm="commitTask" :close="cancelTask">
      <el-form class="form myself-form" ref="taskForm" :model="taskForm" :rules="taskSubmitRules" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="taskForm.name"/>
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :rows="3" v-model="taskForm.desc"/>
        </el-form-item>
      </el-form>
    </DialogBox>




    <DialogBox title="开发环境基本信息" :visible="showEnvDialog" :confirm="commitEnv" :close="cancelEnv">
      <el-form class="form myself-form" ref="envForm" :rules="submitEnvRules" :model="slaveNode" label-width="100px">
        <div class="node-module">
          <h3 class="node-module-title">主节点</h3>
          <el-form-item label="环境" prop="mainNodeImageId">
            <el-cascader v-model="mainNode.image_group" :options="imageOptions" :show-all-levels="false"
              class="full-extent-select"></el-cascader>
          </el-form-item>
          <el-form-item label="资源组" prop="mainProduct">
            <el-select v-model="mainNode.product_id" prop="main_product" class="full-extent-select">
              <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="启动命令行" prop="slaveCommand">
              <el-input type="textarea" :rows="2" v-model="mainNode.command" />
          </el-form-item>
          <div class="right-btn-box" v-if="slaveNodeList.length == 0">
            <span class="outin-handle">
              <a href="javascript:;" @click="addSlaveNode()">增加</a>
            </span>
          </div>
        </div>
        <div v-for="(tag, i) in slaveNodeList" :key="i">
          <div class="node-module">
            <h3 class="node-module-title">从节点</h3>
            <el-form-item label="环境" prop="slaveImage">
              <el-cascader v-model="tag.image_group" :options="imageOptions" :show-all-levels="false"
                class="full-extent-select"></el-cascader>
            </el-form-item>
            <el-form-item label="资源组">
              <el-select v-model="tag.product_id" class="full-extent-select">
                <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数量">
              <el-input-number v-model="tag.pod_num"></el-input-number>
            </el-form-item>
            <el-form-item label="启动命令行" prop="slaveCommand">
              <el-input type="textarea" :rows="2" v-model="tag.command"/>
            </el-form-item>
            <div class="right-btn-box">
              <span class="outin-handle">
                <a href="javascript:;" @click="delSlaveNode(i)">删除</a>
                <a href="javascript:;" @click="addSlaveNode()" v-if="i == slaveNodeList.length - 1">增加</a>
              </span>
            </div>
          </div>
        </div>
      </el-form>
    </DialogBox>










    <DialogBox title="S3输入" :visible="showInS3Dialog" :confirm="addS3in" :close="closeInS3Dialog">
      <el-form class="form myself-form" ref="envForm" :rules="submitEnvRules" :model="slaveNode" label-width="120px">
        <div class="node-module">
          <el-form-item label="名称">
            <el-input type="text" v-model="slaveS3.s3_name"/>
          </el-form-item>
          <el-form-item label="桶">
            <el-select v-model="slaveS3.s3_id">
              <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="路径">
            <el-input type="text" v-model="slaveS3.path"/>
          </el-form-item>
        </div>
      </el-form>
    </DialogBox>

    <DialogBox title="新增S3输出" :visible="showOutS3Dialog" :confirm="addS3out" :close="closeOutS3Dialog">
      <el-form class="form myself-form" ref="envForm" :rules="submitEnvRules" :model="slaveNode" label-width="120px">
        <div class="node-module">
          <el-form-item label="名称">
            <el-input type="text" v-model="slaveS3.s3_name"/>
          </el-form-item>
          <el-form-item label="桶">
            <el-select v-model="slaveS3.s3_id">
              <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="路径">
            <el-input type="text" v-model="slaveS3.path"/>
          </el-form-item>
        </div>
      </el-form>
    </DialogBox>

    <DialogBox title="添加超参" :visible="showParameterDialog" :confirm="addParameter" :close="closeParamDialog">
      <el-form class="form myself-form" ref="envForm" :rules="submitEnvRules" :model="slaveparameter"
               label-width="120px">
        <div class="node-module">
          <el-form-item label="显示名">
            <el-input type="text" v-model="slaveparameter.name"/>
          </el-form-item>
          <el-form-item label="参数名">
            <el-input type="text" v-model="slaveparameter.key"/>
          </el-form-item>
          <el-form-item label="值">
            <el-input type="text" v-model="slaveparameter.value"/>
          </el-form-item>
        </div>
      </el-form>
    </DialogBox>

    <plug-dataset :dataset_list="versionNow.dataset_list" @onClose="cancelDataset"
                  :showDataSetDialog="showDataSetDialog" @infoDataset="infoDataset"
                  v-if="versionNow.dataset_list"/>
    <plug-model :model_list="versionNow.model_list" @infoModel="infoModel" @onClose="cancelModel"
                :showModelDialog="showModelDialog" v-if="versionNow.model_list"/>



  

    <DialogBox title="端口基本信息" :visible="showPortDialog" :confirm="infoPort" :close="closePortDialog">
      <el-form class="form myself-form" ref="portForm" :model="versionNow">
        <plug-update-port @onClose="closePortDialog" :port_list="versionNow.port_list" @infoPort="infoPort"
                          v-if="versionNow.port_list"/>
      </el-form>
    </DialogBox>

   
  </div>
</template>

<script>

// import plugState from '@/components/module/plug-state'
import plugDataset from '@/components/module/plug-in-dataset-task'
import plugModel from '@/components/module/plug-in-model-task'
import DialogBox from '@/components/module/dialog-box.vue';
import {getAllProducts} from '@/api/product'
import {putTask, putTaskVersion, getTaskVersionDetail} from '@/api/task'
import {getAllImageGroups, getImageDetail} from '@/api/image'
import {mainImageRule, mainProductRule} from '@/utils/rule'
import {paramMap} from '@/utils/maps'
import plugUpdatePort from '@/components/module/plug-update-port'
// import plugUpdateS3 from '@/components/module/plug-update-s3'
// import plugUpdateParameter from '@/components/module/plug-update-parameter'
import {getAllAssetS3} from '@/api/inout'

export default {
  data() {
    return {
      verModel: {
        id: null
      },
      Datasetde: {
        id: null,
        isdelete: false
      },
      isAddNode_group: false,//是否开启表格编辑框
      nodeItem: {},//点击的某行表格
      slaveNode: {
        type: 2,
        pod_num: 1
      },
      slaveS3: {},
      slaveparameter: {},
      s3_flag: paramMap['s3_flag'],
      showEnvDialog: false,
      showDataSetDialog: false,
      showModelDialog: false,
      showInS3Dialog: false,
      showOutS3Dialog: false,
      showPortDialog: false,
      showParameterDialog: false,
      imageOptions: [],
      productOptions: [],
      mainNode: {pod_num: 1, type: 0},
      slaveNodeList: [],
      dataset_list: [],
      in_s3_list: [],
      model_list: [],
      out_s3_list: [],
      s3Options: [],
      status: null,
      ssh_list: [],
      versionNow: {},
      submitEnvRules: {
        // main_image_id: [
        //   { required: true, message: "该项为必填项" },
        // ],
        main_product: [
          {required: true, message: "该项为必填项"},
        ],
        mainNodeImageId: [
          {required: true, validator: mainImageRule.bind(this, this), trigger: 'change'}
        ],
        mainProduct: [
          {required: true, validator: mainProductRule.bind(this, this), trigger: 'change'}
        ],
        // tagImageId: [
        //   { required: true, validator: slaveImageRule.bind(this, this), trigger: 'change' }
        // ],
      },
      showTaskDialog: false,
      taskSubmitRules: {
        name: [
          {required: true, message: "该项为必填项"},
          {required: true, min: 1, max: 40, message: "长度在1到40个字符"},
        ],
        desc: [
          {required: true, message: "该项为必填项"},
          {required: true, min: 1, max: 200, message: "长度在1到200个字符"},
        ],
      },
      taskForm: {visibility: 0},
    };
  },
  components: {
    plugDataset,
    plugUpdatePort,
    plugModel,
    // plugUpdateS3,
    // plugState,
    // plugUpdateParameter,
    DialogBox,
  },
  props: ['detailData', 'version'],
  watch: {
    async detailData(val) {
      console.log(val)
      this.getData()
    },
    version(val) {
      console.log("version", val)
      this.getData()
    }
  },

  mounted() {
    this.status = this.version.status
    this.getS3s()
    this.getData()
    this.getAllImageGroups()
    this.getProductList()
  },
  methods: {
    // 编辑开发环境
    async updataNodeGroup() {
      this.versionNow.node_group_list = this.version.node_group_list
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.freshVersion()
        this.$message.success("编辑成功")
        this.isAddNode_group = false
        this.nodeItem = {}
      }
    },
    // 编辑超参
    async saveParameter() {
      this.versionNow.parameter_list = this.version.parameter_list
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.freshVersion()
        this.$message.success("编辑成功")
        this.isAddNode_group = false
        this.nodeItem = {}
      }
    },
    // 添加超参
    async addParameter() {
      this.versionNow.parameter_list.push(this.slaveparameter)
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.freshVersion()
        this.$message.success("新增成功")
        this.isAddNode_group = false
        this.nodeItem = {}
        this.slaveparameter = {}
        this.showParameterDialog = false
      }
    },
    // 删除超参数
    deleteParameter(item) {
      this.$messageBox.confirm("确认删除该数据?", "提示", {
        type: 'warning',
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(async () => {
        this.versionNow.parameter_list = []
        for (let i = 0; i < this.version.parameter_list.length; i++) {
          if (this.version.parameter_list[i].id != item.id) {
            this.versionNow.parameter_list.push(this.version.parameter_list[i])
          }
        }
        let res = await putTaskVersion(this.versionNow);
        if (res && res.data) {
          this.freshVersion()
          this.$message.success("删除成功")
        }
      })
    },
    // 编辑s3输入
    async saveS3In() {
      for (let i = 0; i < this.versionNow.s3_list; i++) {
        if (this.versionNow.s3_list[i].id == this.nodeItem.id) {
          this.versionNow.s3_list[i] = this.nodeItem
        }
      }
      // this.versionNow.s3_list = this.in_s3_list
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.freshVersion()
        this.$message.success("编辑成功")
        this.isAddNode_group = false
        this.nodeItem = {}
      }
    },
    // 编辑s3输出
    async saveS3out() {
      // this.versionNow.s3_list = this.out_s3_list
      for (let i = 0; i < this.versionNow.s3_list; i++) {
        if (this.versionNow.s3_list[i].id == this.nodeItem.id) {
          this.versionNow.s3_list[i] = this.nodeItem
          break
        }
      }
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.freshVersion()
        this.$message.success("编辑成功")
        this.isAddNode_group = false
        this.nodeItem = {}
      }
    },
// 删除s3输出
    deleteS3out(item) {
      this.$messageBox.confirm("确认删除该数据?", "提示", {
        type: 'warning',
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(async () => {
        let tmplist = []
        for (let i = 0; i < this.versionNow.s3_list.length; i++) {
          if (this.versionNow.s3_list[i].id != item.id) {
            tmplist.push(this.versionNow.s3_list[i])
          }
        }
        this.versionNow.s3_list = tmplist
        let res = await putTaskVersion(this.versionNow);
        if (res && res.data) {
          this.freshVersion()
          this.$message.success("删除成功")
        }
      })
    },
    // 删除s3输入
    deleteS3(item) {
      this.$messageBox.confirm("确认删除该环境?", "提示", {
        type: 'warning',
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(async () => {
        this.versionNow.s3_list = []
        for (let i = 0; i < this.in_s3_list.length; i++) {
          if (this.in_s3_list[i].id != item.id) {
            this.versionNow.s3_list.push(this.in_s3_list[i])
          }
        }
        let res = await putTaskVersion(this.versionNow);
        if (res && res.data) {
          this.freshVersion()
          this.$message.success("删除成功")
        }
      })
    },
    // 新增s3输入
    async addS3in() {
      this.slaveS3.type = 0
      this.versionNow.s3_list.push(this.slaveS3)
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.freshVersion()
        this.$message.success("新增成功")
        this.isAddNode_group = false
        this.nodeItem = {}
        this.slaveS3 = {}
        this.showInS3Dialog = false
      }
    },
    // 新增s3输出
    async addS3out() {
      this.slaveS3.type = 1
      this.versionNow.s3_list.push(this.slaveS3)
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.freshVersion()
        this.$message.success("新增成功")
        this.isAddNode_group = false
        this.nodeItem = {}
        this.slaveS3 = {}
        this.showOutS3Dialog = false
      }
    },
    // 删除开发环境
    deleteNodeGroup(item) {
      this.$messageBox.confirm("确认删除该环境?", "提示", {
        type: 'warning',
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(async () => {
        this.versionNow.node_group_list = []
        for (let i = 0; i < this.version.node_group_list.length; i++) {
          if (this.version.node_group_list[i].id != item.id) {
            this.versionNow.node_group_list.push(this.version.node_group_list[i])
          }
        }
        let res = await putTaskVersion(this.versionNow);
        if (res && res.data) {
          this.freshVersion()
          this.$message.success("删除成功")
        }
      })
    },
    // 添加开发环境
    async addNodeGroup() {
      this.slaveNode.image_id = this.slaveNode.image_group[2]
      this.versionNow.node_group_list = JSON.parse(JSON.stringify(this.version.node_group_list));
      this.versionNow.node_group_list.push(this.slaveNode)
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.freshVersion()
        this.$message.success("添加成功")
      }
      this.slaveNode = {
        type: 2,
        pod_num: 1
      }
      this.showEnvDialog = false
    },
    // 删除数据集
    deleteMsg(id) {
      console.log(1111111)
      this.Datasetde.id = id
      this.Datasetde.isdelete = true
    },
    cancelData() {
      this.Datasetde.id = null
    },
    // 删除数据集
    async deleteDataset(item) {
      this.versionNow.dataset_list = []
      for (let i = 0; i < this.version.dataset_list.length; i++) {
        if (this.version.dataset_list[i].id != item.id) {
          this.versionNow.dataset_list.push(this.version.dataset_list[i])
        }
      }
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.freshVersion()
        this.$message.success("删除成功")
      }
    },
    // 删除预训练模型
    delModel(item) {
      this.verModel.id = item.id
    },
    canceModel() {
      this.verModel.id = null
    },
    // 删除预训练模型
    async deleteModel(item) {
      this.versionNow.model_list = []
      for (let i = 0; i < this.version.model_list.length; i++) {
        if (this.version.model_list[i].id != item.id) {
          this.versionNow.model_list.push(this.version.model_list[i])
        }
      }
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.freshVersion()
        this.$message.success("删除成功")
      }
    },
    dialogShowChange(val) {
      this.showModelDialog = val
    },
    // 开启表格编辑
    showNodeGroup(item) {
      this.isAddNode_group = true
      this.nodeItem = item
    },
    updateTask() {
      this.showTaskDialog = true
      this.taskForm = this.detailData
    },
    commitTask() {
      this.$refs.taskForm.validate(async (valid) => {
        if (valid) {
          await putTask(this.taskForm)
          this.showTaskDialog = false
        }
      })
    },
    cancelTask() {
      this.showTaskDialog = false
    },
    lookLog(row) {
      console.log(row)
    },
    getData() {
      this.versionNow = JSON.parse(JSON.stringify(this.version))
      this.status = this.version.status
      this.getAddForm(this.versionNow)
      console.log("versionNow", this.versionNow)
    },
    closeOutS3Dialog() {
      this.showOutS3Dialog = false
    },
    closeInS3Dialog() {
      this.showInS3Dialog = false
    },
    closeParamDialog() {
      this.showParameterDialog = false
    },
    closePortDialog() {
      this.showPortDialog = false
    },
    formatterRole({type}) {
      let role = {
        1: '主节点',
        2: '从节点'
      }
      return role[type]
    },
    async getAddForm(data) {
      this.slaveNodeList = []
      this.in_s3_list = []
      this.out_s3_list = []
      for (let node of data.node_group_list) {
        if (node.type == 1) {
          this.mainNode = node
          let res = await getImageDetail({id: this.mainNode.image_id})
          let mainImage = res.data
          this.mainNode.image_group = [mainImage.visibility.toString(), mainImage.engine.toString(), mainImage.id]
        } else {
          let res = await getImageDetail({id: node.image_id})
          let slaveImage = res.data
          let slaveNode = node
          slaveNode.image_group = [slaveImage.visibility.toString(), slaveImage.engine.toString(), slaveImage.id]
          this.slaveNodeList.push(slaveNode)
        }
      }

      if (data.s3_list.length > 0) {
        for (let s3 of data.s3_list) {
          if (s3.type == 0) {
            this.in_s3_list.push(s3)
          } else {
            this.out_s3_list.push(s3)
          }
        }
      }
    },
    updateEnv() {
      this.showEnvDialog = true
    },
    commitEnv() {
      this.versionNow.node_group_list = []
      this.mainNode.type = 1
      this.mainNode.image_id = this.mainNode.image_group[2]
      this.versionNow.node_group_list.push(this.mainNode)
      for (let i = 0; i < this.slaveNodeList.length; i++) {
        this.slaveNodeList[i].type = 2
        this.slaveNodeList[i].image_id = this.slaveNodeList[i].image_group[2]
        this.versionNow.node_group_list.push(this.slaveNodeList[i])
      }
      this.$refs.envForm.validate(async (valid) => {
        if (valid) {
          let res = await putTaskVersion(this.versionNow);
          if (res && res.data) {
            this.showEnvDialog = false
            this.freshVersion()
          }
        }
      })
    },
    cancelEnv() {
      this.showEnvDialog = false
    },
    addSlaveNode() {
      let data = {type: 1, pod_num: 1}
      this.slaveNodeList.push(data)
    },
    delSlaveNode(i) {
      this.slaveNodeList.splice(i, 1)
    },
    async getAllImageGroups() {
      let res = await getAllImageGroups()
      this.imageOptions = res.data
    },
    updatePort() {
      this.showPortDialog = true
    },
    async commitPort() {
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.showPortDialog = false
        this.freshVersion()
      }
    },
    cancelPort() {
      this.showPortDialog = false
    },
    infoPort(ports) {
      this.versionNow.port_list = ports
      this.commitPort()
    },
    updateParameter() {
      this.showParameterDialog = true
    },
    async commitParameter() {
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.showParameterDialog = false
        this.freshVersion()
      }
    },
    cancelParameter() {
      this.showParameterDialog = false
    },
    infoParameter(parameters) {
      this.versionNow.parameter_list = parameters
      this.commitParameter()
    },
    updateDataset() {
      this.showDataSetDialog = true
    },
    async commitDataset() {
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.showDataSetDialog = false
        this.freshVersion()
      }
    },
    async freshVersion() {
      let res = await getTaskVersionDetail({id: this.version.id})
      this.$emit('update:version', res.data)
      this.versionNow = res.data
    },
    cancelDataset() {
      this.showDataSetDialog = false
    },
    infoDataset(datasets) {
      datasets.forEach(e => {
        e.dataset_id = e.id
      })
      this.versionNow.dataset_list = datasets

      this.commitDataset()
    },

    updateModel() {
      this.showModelDialog = true
    },
    async commitModel() {
      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.showModelDialog = false
        this.freshVersion()
      }
    },
    cancelModel() {
      this.showModelDialog = false
    },
    infoModel(models) {
      this.model_list = []
      models.forEach(e => {
        e.model_version_id = e.id
      })
      this.versionNow.model_list = models

      console.log("models", models)
      this.commitModel()
    },

    updateInS3() {
      this.showInS3Dialog = true
      this.in_s3_list = this.versionNow.s3_list.filter(item => item.type === 0);
    },
    async getProductList() {
      let res = await getAllProducts()
      this.productOptions = res.data
    },
    async commitInS3(s3_list) {
      this.versionNow.s3_list = []

      this.in_s3_list = s3_list.filter(item => Object.keys(item).length !== 0)
      for (let i = 0; i < s3_list.length; i++) {
        s3_list[i].type = 0
        this.versionNow.s3_list.push(this.in_s3_list[i])
      }

      this.out_s3_list = this.out_s3_list.filter(item => Object.keys(item).length !== 0)
      for (let i = 0; i < this.out_s3_list.length; i++) {
        this.out_s3_list[i].type = 1
        this.versionNow.s3_list.push(this.out_s3_list[i])
      }

      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.showInS3Dialog = false
        this.freshVersion()
      }
    },
    cancelInS3() {
      this.getAddForm(this.versionNow)
      this.showInS3Dialog = false
    },
    infoInS3(s3s) {
      //console.log("in s333", s3s)
      this.in_s3_list = s3s
      this.commitInS3()
    },

    updateOutS3() {
      this.showOutS3Dialog = true
      // this.out_s3_list = this.versionNow.s3_list.filter(item => item.type === 1);
    },
    async commitOutS3(s3_list) {
      this.versionNow.s3_list = []

      this.in_s3_list = this.in_s3_list.filter(item => Object.keys(item).length !== 0)
      for (let i = 0; i < this.in_s3_list.length; i++) {
        this.in_s3_list[i].type = 0
        this.versionNow.s3_list.push(this.in_s3_list[i])
      }

      this.out_s3_list = s3_list.filter(item => Object.keys(item).length !== 0)
      for (let i = 0; i < s3_list.length; i++) {
        s3_list[i].type = 1
        this.versionNow.s3_list.push(this.out_s3_list[i])
      }

      let res = await putTaskVersion(this.versionNow);
      if (res && res.data) {
        this.showOutS3Dialog = false
        this.freshVersion()
      }
    },
    cancelOutS3() {
      this.getAddForm(this.versionNow)
      this.showOutS3Dialog = false
    },
    infoOutS3(s3s) {
      //console.log("s333", s3s)
      this.out_s3_list = s3s
      this.commitOutS3()
    },
    s3idFormat(s3_id) {
      for (let s3 of this.s3Options) {
        if (s3_id?.toString() == s3.id) {
          return s3.name
        }
      }
      return s3_id
    },
    async getS3s() {
      let res = await getAllAssetS3({});
      this.s3Options = res.data
    },
  }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/code.less";
@import "~@/assets/css/task.less";
</style>
